<template>
    <div class="asset-manage">
        <vHead appPath="/assetManage" appTitle="资产管理">
            <el-button class="management-btn" v-if="showModel" @click="linkToManage"><i class="manage-icon"></i> <i>资产管理</i></el-button>
        </vHead>
        <main class="asset-main">
            <template v-if="!isShowNav">
                <nav>
                    <div :class="activeName===item.name?'tab-item active':'tab-item'" v-for="(item, index) of navData" :key="index" @click="handleClick(item.name)">{{item.label}}</div>
                </nav>
                <router-view />
            </template>
            <template v-else>
                <router-view :key="Date.now()" />
            </template>
        </main>
        <vFoot />
    </div>
</template>
<script>
    import vHead from "@/components/common/header";
    import vFoot from '@/components/common/footer';

    export default {
        components: {
            vHead,
            vFoot
        },
        data() {
            return {
            //导航栏数据
            navData: [
            {
                label: "资产列表",
                name: "0"
            },
            {
                label: "资产大数据",
                name: "1"
            }
            ],
            manageInfo:[]
        };
    },
    created() {
        this.activeName = is_empty(sessionStorage.getItem("activeName"))
        ? "0"
        : sessionStorage.getItem("activeName");
        this.getManageInfo();
    },
    mounted() {},
    computed: {
        // 是否隐藏导航条
        isShowNav() {
            return ['/assetManage/detail','/assetManage/detail/'].includes(this.$route.path);
        },
        // // 判断是否有后台权限
        // indentify() {
        //     var role = JSON.parse(sessionStorage.getItem("user_info_str")).role;

        //     for (var i = 0; i < role.length; i++) {
        //         if (role <= 3) {
        //             return true;
        //         }
        //     }

        //     return false;
        // },
        // 判断后台是否设置了当前身份显示资产管理模块的权限
        showModel(){
            let _data=this.manageInfo;
            if(!is_empty(_data)){
                for (var i = _data.length - 1; i >= 0; i--) {
                    if(_data[i].id=="1062"){
                        let flag =_data[i].children.findIndex((item,index)=>{
                            return item.id=="1141"
                        })>-1;
                        return flag;
                    }
                }
            }else{
                return false;
            }
        },
    },
    methods: {
        // 导航点击切换页面
        handleClick(name) {
            name == "0"
            ? this.$router.push("/assetManage")
            : this.$router.push("/assetManage/data");
            this.activeName = name;
            sessionStorage.setItem("activeName",name);
        },
        // 跳去后台资产管理模块
        linkToManage() {
            var url = sessionStorage.getItem("manage_url");
            var host = sessionStorage.getItem("host");
            var token = sessionStorage.getItem("redirect_params");
            window.open(decodeURIComponent(url + '/admin' + token + '&host=' + host + '&routerUrl=' + 'affairs/asset/asset-list')); 
        },
        getManageInfo(){
            let success = res => {
                if(res.data.manage){
                    this.manageInfo = res.data.manage;
                }
            };
            this.$ajax.get("api/login/login", {
                params: {},
                func: { success: success }
            });
        },
    }
};
</script>
<style lang="scss">
.asset-manage {
    position: relative;

    .management-btn {
        position: absolute;
        top: 22px;
        right: 40px;
        padding: 0;
        width: 120px;
        height: 36px;
        background-color: #deefff;
        i {
            vertical-align: middle;
        }
        .manage-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 18px;
            background: url("../../../assets/images/assetManage/mange_icon.png");
        }
    }
    .asset-main {
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        min-height: calc(100vh - 124px);
        padding: 18px 0 40px;
        nav{
           box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
           border-radius: 3px;
           background-color: #fff;
           padding-left: 20px;
           .tab-item{
            box-sizing: border-box;
            display: inline-block;
            width: 70px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            margin: 0 20px;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            border-bottom:4px solid transparent;
            cursor: pointer;
        }
        .active{
            color: #409EFF;
            border-bottom:4px solid #409EFF;
        }
    }

}
}


@import "./../../../assets/css/assetManage.scss";
</style>